<template>
    <div>
        <div @click="openEdit">
            <header_moban_1 :title="row.title"></header_moban_1>

            <div class="resume_content_main f-14">
                <div
                    v-for="(item, index) in row.list"
                    :key="index"
                    :class="[index === 0 ? '' : 'm-t-20']"
                >
                    <div class="flex-center-wrap flex-justify-between">
                        <div class="f-400">{{ item.left }}</div>
                        <div class="f-blod">{{ item.center }}</div>
                        <div class="f-400">{{ item.right }}</div>
                    </div>

                    <div class="m-t-10 c-666" v-html="item.html"></div>
                </div>
            </div>
        </div>
        <DialogForm
            v-if="visable"
            v-model="visable"
            title="编辑"
            auto
            ref="DialogFormRef"
            :formConfig="formConfig"
            :formData="formData"
            :rules="rules"
            @confirm="confirm"
            @closed="count=0"    
        >
            <template slot="list">
                <div
                    v-for="(item, index) in formData.list"
                    :key="index"
                    :class="[index === 0 ? '' : 'm-t-20']"
                >
                    <div class="grid-list">
                        <div class="flex-center-wrap">
                            <div class="flex-0">左侧：</div>
                            <el-input v-model="item.left" :maxlength="100"></el-input>
                        </div>
                        <div class="flex-center-wrap">
                            <div class="flex-0">中间：</div>
                            <el-input v-model="item.center" :maxlength="100"></el-input>
                        </div>
                        <div class="flex-center-wrap">
                            <div class="flex-0">右侧：</div>
                            <el-input v-model="item.right" :maxlength="100"></el-input>
                        </div>
                    </div>

                    <div class="h-400 m-t-10">
                        <mavonEditor
                            v-model="item.str"
                            @change="
                                (row) => {
                                    editorChange(row, item)
                                }
                            "
                            @loadSuccess="loadSuccess"
                        ></mavonEditor>
                    </div>

                    <div class="flex-center m-t-10">
                        <el-button class="m-l-20" type="primary" @click="addItem(index)"
                            >+add</el-button
                        >
                        <el-button class="m-l-10" type="danger" @click="delItem(index)"
                            >+del</el-button
                        >
                    </div>
                </div>
                <div class="flex-center" v-if="!formData.list">
                    <el-button type="primary" @click="addItem(null)">+add</el-button>
                </div>
            </template>
        </DialogForm>
    </div>
</template>

<script>
export default {
    components: {
        header_moban_1: () => import('@/components/bn/headerPages/moban_1.vue'),
        mavonEditor: () => import('@/components/mavonEditor/bnEdit.vue'),
    },
    props: {
        name: {
            type: String,
            default: '',
        },
        row: {
            type: Object,
            default() {
                return {}
            },
        },
        isEdit: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            count: 0,
            visable: false,
            formConfig: [
                {
                    label: '模块名',
                    type: 'input',
                    modelName: 'title',
                    className: 'w-300',
                },
                {
                    label: '内容区',
                    type: 'customInput',
                    slot: 'list',
                },
            ],
            formData: {
                list: [],
            },
            rules: {
                title: [{ required: true, message: '请输入模块名字', trigger: 'blur' }],
            },
        }
    },
    created() {
        if (this.row.is_need_default) {
            const defaultval = {
                title: '工作经验',
                list: [
                    {
                        left: '2021.06 - 2021.09',
                        center: '成都环宇知了科技有限公司（之了集团）',
                        right: '前端开发工程师',
                        str: '本项目是 pc 端项目，包括商品购买、授课（直播、录播）、做题、资讯、个人中心等模块；实现了从会计相关文章推广，到看课学习、练习、模拟考试整套会计考试，答疑等相关模块。\n涉及技术栈：vue-ssr,express，element-ui，vue-router,vuex等\n项目地址：https://www.zlketang.com/\n项目职责：\n完成全局缓存的搭建：接口缓存，页面缓存。提升了用户体验，降低了服务器压力50%左右。\nsitemap动态生成，域名容灾，资源加载失败重试，全局tdk及页面定制tdk等全局方法的创建。\n题库的重构，降低了后续的开发难度与提高了可维护度，新增了笔记，讨论，标记，标注，表格回答等实用功能。\n学员答疑模块，包含常见的社区讨论与在线im答疑。\n播放器新增定制化开发，包含控制块样式与功能的定制与新增笔记截图功能等。',
                        html: '<p>本项目是 pc 端项目，包括商品购买、授课（直播、录播）、做题、资讯、个人中心等模块；实现了从会计相关文章推广，到看课学习、练习、模拟考试整套会计考试，答疑等相关模块。<br />\n涉及技术栈：vue-ssr,express，element-ui，vue-router,vuex等<br />\n项目地址：https://www.zlketang.com/<br />\n项目职责：<br />\n完成全局缓存的搭建：接口缓存，页面缓存。提升了用户体验，降低了服务器压力50%左右。<br />\nsitemap动态生成，域名容灾，资源加载失败重试，全局tdk及页面定制tdk等全局方法的创建。<br />\n题库的重构，降低了后续的开发难度与提高了可维护度，新增了笔记，讨论，标记，标注，表格回答等实用功能。<br />\n学员答疑模块，包含常见的社区讨论与在线im答疑。<br />\n播放器新增定制化开发，包含控制块样式与功能的定制与新增笔记截图功能等。</p>\n',
                    },
                    {
                        left: '2021.06 - 2021.09',
                        center: '成都环宇知了科技有限公司（之了集团）',
                        right: '前端开发工程师',
                        str: '本项目是 pc 端项目，包括商品购买、授课（直播、录播）、做题、资讯、个人中心等模块；实现了从会计相关文章推广，到看课学习、练习、模拟考试整套会计考试，答疑等相关模块。\n涉及技术栈：vue-ssr,express，element-ui，vue-router,vuex等\n项目地址：https://www.zlketang.com/\n项目职责：\n完成全局缓存的搭建：接口缓存，页面缓存。提升了用户体验，降低了服务器压力50%左右。\nsitemap动态生成，域名容灾，资源加载失败重试，全局tdk及页面定制tdk等全局方法的创建。\n题库的重构，降低了后续的开发难度与提高了可维护度，新增了笔记，讨论，标记，标注，表格回答等实用功能。\n学员答疑模块，包含常见的社区讨论与在线im答疑。\n播放器新增定制化开发，包含控制块样式与功能的定制与新增笔记截图功能等。',
                        html: '<p>本项目是 pc 端项目，包括商品购买、授课（直播、录播）、做题、资讯、个人中心等模块；实现了从会计相关文章推广，到看课学习、练习、模拟考试整套会计考试，答疑等相关模块。<br />\n涉及技术栈：vue-ssr,express，element-ui，vue-router,vuex等<br />\n项目地址：https://www.zlketang.com/<br />\n项目职责：<br />\n完成全局缓存的搭建：接口缓存，页面缓存。提升了用户体验，降低了服务器压力50%左右。<br />\nsitemap动态生成，域名容灾，资源加载失败重试，全局tdk及页面定制tdk等全局方法的创建。<br />\n题库的重构，降低了后续的开发难度与提高了可维护度，新增了笔记，讨论，标记，标注，表格回答等实用功能。<br />\n学员答疑模块，包含常见的社区讨论与在线im答疑。<br />\n播放器新增定制化开发，包含控制块样式与功能的定制与新增笔记截图功能等。</p>\n',
                    },
                    {
                        left: '2021.06 - 2021.09',
                        center: '成都环宇知了科技有限公司（之了集团）',
                        right: '前端开发工程师',
                        str: '本项目是 pc 端项目，包括商品购买、授课（直播、录播）、做题、资讯、个人中心等模块；实现了从会计相关文章推广，到看课学习、练习、模拟考试整套会计考试，答疑等相关模块。\n涉及技术栈：vue-ssr,express，element-ui，vue-router,vuex等\n项目地址：https://www.zlketang.com/\n项目职责：\n完成全局缓存的搭建：接口缓存，页面缓存。提升了用户体验，降低了服务器压力50%左右。\nsitemap动态生成，域名容灾，资源加载失败重试，全局tdk及页面定制tdk等全局方法的创建。\n题库的重构，降低了后续的开发难度与提高了可维护度，新增了笔记，讨论，标记，标注，表格回答等实用功能。\n学员答疑模块，包含常见的社区讨论与在线im答疑。\n播放器新增定制化开发，包含控制块样式与功能的定制与新增笔记截图功能等。',
                        html: '<p>本项目是 pc 端项目，包括商品购买、授课（直播、录播）、做题、资讯、个人中心等模块；实现了从会计相关文章推广，到看课学习、练习、模拟考试整套会计考试，答疑等相关模块。<br />\n涉及技术栈：vue-ssr,express，element-ui，vue-router,vuex等<br />\n项目地址：https://www.zlketang.com/<br />\n项目职责：<br />\n完成全局缓存的搭建：接口缓存，页面缓存。提升了用户体验，降低了服务器压力50%左右。<br />\nsitemap动态生成，域名容灾，资源加载失败重试，全局tdk及页面定制tdk等全局方法的创建。<br />\n题库的重构，降低了后续的开发难度与提高了可维护度，新增了笔记，讨论，标记，标注，表格回答等实用功能。<br />\n学员答疑模块，包含常见的社区讨论与在线im答疑。<br />\n播放器新增定制化开发，包含控制块样式与功能的定制与新增笔记截图功能等。</p>\n',
                    },
                ],
            }
            for (const key in defaultval) {
                this.$set(this.row, key, defaultval[key])
            }
        }
        this.$emit('loadSuccess', {
            row_code: this.row.row_code,
        })
    },
    methods: {
        loadSuccess() {
            this.count++
            if (this.count >= this.formData.list.length) {
                this.$refs.DialogFormRef.$refs.eDialogRef.init()
            }
        },
        openEdit() {
            this.formData = this.deepCopy(this.row)
            this.visable = true
        },
        confirm() {
            this.$emit('update', {
                info: this.formData,
            })
            this.visable = false
        },
        editorChange(row, item) {
            Object.assign(item, row)
        },

        addItem(index) {
            if (!Array.isArray(this.formData.list)) {
                this.$set(this.formData, 'list', [])
            }
            const obj = { left: '', center: '', right: '', str: '', html: '' }
            if (typeof index === 'number') {
                this.formData.list.splice(index + 1, 0, obj)
            } else {
                this.formData.list.push(obj)
            }
        },
        delItem(index) {
            this.formData.list.splice(index, 1)
        },
    },
}
</script>

<style lang="scss" scoped>
.resume_content_main {
    padding: 14px 20px;
}
.grid-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, 400px);
    gap: 10px;
}
</style>
